<template>
  <div class="confirm">
    <div class="item">
      <div class="main">
        <div class="info">
          <li v-for="(item, index) in baseInfo" :key="index">
            <label>{{item.key}}</label>
            <span>{{item.value}}</span>
          </li>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">
        <i>
          <img src="../../../assets/images/form_label_license.png">
        </i>
        <span>
          营业执照
          <i>{{formData.license}}</i>
        </span>
      </div>
      <div class="main">
        <div class="poster 1">
          <li :style="{backgroundImage:'url('+formData.licenseImageUrl+')'}"></li>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">
        <i>
          <img src="../../../assets/images/form_label_id.png">
        </i>
        <span>身份证</span>
      </div>
      <div class="main">
        <div class="poster double">
          <li :style="{backgroundImage:'url('+formData.IDCardFrontUrl+')'}"></li>
          <li :style="{backgroundImage:'url('+formData.IDCardBackUrl+')'}"></li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      baseInfo: []
    };
  },
  methods: {
    baseInfoInit() {
      this.baseInfo.push({ key: "证件姓名", value: this.formData.name });
      this.baseInfo.push({
        key: "联系方式",
        value: this.formData.mobileNumber
      });
      this.baseInfo.push({ key: "证件号码", value: this.formData.IDCard });
      this.baseInfo.push({
        key: "门店区域",
        value:
          this.formData.province +
          " " +
          this.formData.city +
          " " +
          this.formData.district
      });
      this.baseInfo.push({ key: "门店地址", value: this.formData.address });
      //this.baseInfo.push({ key: '营业执照', value: this.formData.license })
    }
  },
  mounted() {
    this.baseInfoInit();
  }
};
</script>
<style lang='stylus' scoped>
@import '../../../assets/styles/index.styl'
.confirm {
  margin-bottom 15px
  .item {
    .title {
      border-top 1px solid rgba(0, 0, 0, 0.05)
      padding-top 25px
      i {
        height 16px
        display inline-block
        img {
          vertical-align top
          height 100%
          width auto
          position relative
          top 2px
        }
      }
      span {
        display inline-block
        margin-left 5px
        i {
          color c5
          margin-left 3px
        }
      }
    }
    .main {
      .poster {
        padding 15px 0
        li {
          height 200px
          background-image url('../../../assets/images/exam_license.jpg')
          background-position center top
          background-repeat no-repeat
          background-size contain
        }
        &.double {
          li {
            display inline-block
            width 46%
            height 100px
            margin-right 8%
            background-image url('../../../assets/images/exam_idCard1.jpg')
            &:last-child {
              background-image url('../../../assets/images/exam_idCard2.jpg')
              margin-right 0
            }
          }
        }
      }
      .info {
        font-size 14px
        white-space nowrap
        li {
          margin 10px 0
          label {
            // width 60px
            display inline-block
            opacity 0.7
            text-align justify
            text-align right
            margin-right 20px
          }
          span {
            color #333
            font-weight bold
          }
        }
      }
    }
  }
}
</style>
